<template>
  <div>
    <h1>App</h1>
    <p>{{ name }} -- {{ age }}</p>
    <button @click="changeCat">狸猫换太子</button>
  </div>
</template>

<script lang="ts">
 import { defineComponent } from "vue"
  export default  defineComponent({
    name:'App',
    });
</script>

<script setup lang="ts">
import { reactive ,ref ,toRefs } from "vue";


// ref创建的数据被替换时，替换的是ref对象的value属性，是具有响应式的
const cat = ref({
  name:"maomi",
  age:3
})
console.log(cat);

const changeCat = ()=>{
  cat.value.name = "laoli"
  cat.value.age = 38
}

//在解构代理对象的时候,希望可以使用toRefs方法包裹住代理对象解构
//解构出来的值就是ref对象,具有响应式,在逻辑中使用的时候要添加.value
const {name,age} = toRefs(cat.value)

</script>

<style lang="less" scoped>
  
</style>
